<template>
  <div>
    <div class="m-slide">
      <ul class="m-slide-image" :style="{width:slideData.length*100+'%',marginLeft:-activeIndex*100+'%'}">
        <li 
        v-for="item in slideData"
        :key="item.id" 
        :style="{background:item.bg}">{{item.title}}</li>
      </ul>
      <ul class="m-slide-dot">
        <li 
        @click="handleClick($event,index)"
        v-for="(item,index) in slideData"
        :key="item.id" :class="activeIndex==index?'m-slide-dot-actived':''">{{index+1}}</li>
      </ul>
    </div>
    <h3>使用轮播图组件-默认布局</h3>
    <Slide :data="slideData" :activeIndex="activeIndex" :interval="interval"></Slide>
    <h3>使用轮播图组件-自定义布局</h3>
    <Slide :data="slideData" :activeIndex="activeIndex" :interval="interval">
      <template v-slot:default="slotProps"><!--获取每一项的数据，进行自定义布局-->
        <div>{{slotProps.index}}---{{slotProps.item.title}}</div>
      </template>
    </Slide>
  </div>
</template>

<script>
import Slide from './components/Slide.vue'
export default {
  name: 'App',
  components: {
    Slide
  },
  data() {
    return {
      timer: undefined,// 定义器
      activeIndex: 0, // 当前索引值
      interval: 2000, // 每隔多长时间自动切换
      slideData: [ // 定义轮播图的数据
        {
          id: 1,
          title: '图片1',
          bg: '#ff9900'
        },
        {
          id: 2,
          title: '图片2',
          bg: '#ff6677'
        },
        {
          id: 3,
          title: '图片3',
          bg: '#ee8899'
        },
        {
          id: 4,
          title: '图片4',
          bg: '#aa9988'
        }
      ]
	}
  },
  created() {
    this.timer = setInterval(() => {
      // 定时器循环自增索引
      if(this.activeIndex==this.slideData.length-1) {
        this.activeIndex = 0
      } else {
        this.activeIndex = this.activeIndex+1
      }
    }, this.interval);
  },
  methods: {
    // 处理圆点点击事件
    handleClick(e, index) {
      this.activeIndex = index
    }
  }
}
</script>

<style scoped>
ul,li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .m-slide{
      width: 100%;
      height: 300px;
      border: 1px solid red;
      overflow: hidden;
      position: relative;
    }
    .m-slide-image{
      display: flex;
      width: 400%;
      height: 300px;
      /*margin-left从A值变到B值所需要的时长为0.8s*/
      transition: margin-left 0.8s;
      margin-left: 0%;
    }
    .m-slide-image li{
      flex: 1;
    }
    .m-slide-dot{
      height: 44px;
      bottom: 10px;
      right: 14px;
      position: absolute;
      display: flex;
    }
    .m-slide-dot li{
      width: 44px;
      height: 44px;
      border-radius: 22px;
      margin-left: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #cccccc;
      cursor: pointer;
    }
    
    li.m-slide-dot-actived{
      background: #ffe121;
    }
    
</style>
